import { ProCard } from "@ant-design/pro-components";
import { Badge, Calendar } from "antd";
import type { Dayjs } from "dayjs";

import React from "react";

const Page17: React.FC = () => {
  const getListData = (value: Dayjs) => {
    let listData;
    switch (value.date()) {
      case 8:
        listData = [
          { type: "warning", content: "会议" },
          { type: "success", content: "项目完成" },
        ];
        break;
      case 10:
        listData = [
          { type: "warning", content: "截止日期" },
          { type: "success", content: "发布上线" },
        ];
        break;
      case 15:
        listData = [{ type: "warning", content: "代码审查" }];
        break;
      default:
    }
    return listData || [];
  };

  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value);
    return (
      <ul className="events" style={{ listStyle: "none", padding: 0 }}>
        {listData.map((item) => (
          <li key={item.content}>
            <Badge status={item.type as any} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>日历页面</h1>
      <ProCard>
        <Calendar dateCellRender={dateCellRender} />
      </ProCard>
    </div>
  );
};

export default Page17;
